<template>
  <div style="border: 1px solid #ccc" class="my__wangEditor">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor :style="{ height: height + 'px', 'overflow-y': 'hidden' }" v-model="valueHtml" :defaultConfig="editorConfig"
      :mode="mode" @onCreated="handleCreated" />
  </div>
</template>
<script lang="ts" setup>
import { computed, shallowRef, onUnmounted, onBeforeUnmount } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
interface Props {
  modelValue: string | null;
  height?: number | string; // 编辑器的高度
}
interface EmitEvent {
  (e: "update:modelValue", params: string): void;
}
const props = withDefaults(defineProps<Props>(), {
  height: 150
});
const emit = defineEmits<EmitEvent>();
const valueHtml = computed({
  get() {
    if (props.modelValue) {
      return props.modelValue;
    }
  },
  set(value: string | any) {
    emit("update:modelValue", value);
  }
});
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

const mode = "simple";
const toolbarConfig = {
  toolbarKeys: [
    "bold"
    , "underline"
    , "italic"
    // , "through"
    , "code"
    // , "sub"
    // , "sup"
    , "clearStyle"
    , "color"
    // , "bgColor"
    , "fontSize"
    , "fontFamily"
    // , "indent"
    // , "delIndent"
    , "justifyLeft"
    , "justifyRight"
    , "justifyCenter"
    , "justifyJustify"
    , "lineHeight"
    // , "insertImage"
    // , "deleteImage"
    // , "editImage"
    // , "viewImageLink"
    // , "imageWidth30"
    // , "imageWidth50"
    // , "imageWidth100"
    // , "divider"
    // , "emotion"
    // , "insertLink"
    // , "editLink"
    // , "unLink"
    // , "viewLink"
    , "codeBlock"
    , "blockquote"
    , "headerSelect"
    // , "header1"
    // , "header2"
    // , "header3"
    // , "header4"
    // , "header5"
    // , "todo"
    // , "redo"
    // , "undo"
    // , "fullScreen"
    , "bulletedList"
    , "numberedList"
    , "insertTable"
    , "deleteTable"
    , "insertTableRow"
    , "deleteTableRow"
    , "insertTableCol"
    , "deleteTableCol"
    , "tableHeader"
    , "tableFullWidth"
    // , "insertVideo"
    // , "uploadVideo"
    , "uploadImage"
    // , "codeSelectLang"
  ]
};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {}
};

// 修改菜单配置
editorConfig.MENU_CONF["uploadImage"] = {
  server: "/api/Upload/ImageUpload",
  fieldName: "myFile",
  // 单个文件的最大体积限制，默认为 2M
  maxFileSize: 5 * 1024 * 1024, // 1M
  // 最多可上传几个文件，默认为 100
  maxNumberOfFiles: 10,
  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  allowedFileTypes: ["image/*"],
  // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
  // 将 meta 拼接到 url 参数中，默认 false
  metaWithUrl: false,
  // 跨域是否传递 cookie ，默认为 false
  withCredentials: true,
  // 超时时间，默认为 10 秒
  timeout: 5 * 1000, // 5 秒
  onBeforeUpload(file: File) {
    return file;
  },

  // 上传进度的回调函数
  onProgress(progress: number) {
    console.log("progress", progress);
  },

  // 单个文件上传成功之后
  onSuccess(file: File, res: any) {
    console.log(`${file.name} 上传成功`, res);
  },
  // 单个文件上传失败
  onFailed(file: File, res: any) {
    console.log(`${file.name} 上传失败`, res);
  },
  // 上传错误，或者触发 timeout 超时
  onError(file: File, err: any, res: any) {
    console.log(`${file.name} 上传出错`, err, res);
  }
};



editorConfig.MENU_CONF["showMenuTooltips"] = {};


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const { value } = editorRef;
  if (value === null) return;
  value.destroy();
});

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

<style>
.w-e-text-container [data-slate-editor] p {
  margin: 0;
}
</style>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}



.my__wangEditor {
  max-width: 700px;

  .w-e-text-container {
    z-index: 10;
  }
}
</style>
